<!--
 * @Author: Nico
-->
<template>
  <!-- v-model.lazy="formDataModel" -->

  <UiPdaFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <div class="w-full border-b-2 rounded-none uiPdaDateTimeInput">
      <van-field
        :ref="info._id"
        v-model.trim="formDataModel"
        v-ui-ref="vSetRef"
        :class="{ hasPrefix: info.extension.prefixIcon && info.extension.prefixIcon.value }"
        clearable
        :disabled="info.extension.disabled.value || conditionProperty.disabled"
        :label="info.extension.label.value"
        label-align="left"
        :left-icon="info.extension.suffixIcon.value ? 'search' : 'none'"
        :name="info.extension.model.value"
        :placeholder="info.extension.placeholder.value"
        :required="info.extension.extendRule.value.required && info.extension.extendRule.value.ChangeSwitch"
        @change="handleChange(formDataModel)"
        @clear="clear(item)"
        @click-left-icon="clickIcon(info, formDataModel)"
        @focus="focus($event)"
        @input="handleInput(formDataModel)"
        @keydown="confirm($event, formDataModel)"
      />
    </div>
  </UiPdaFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin } from '@ve/mixin'
  import { Field } from 'vant'
  import dayjs from 'dayjs'
  export default defineComponent({
    name: 'UiPdaDateTimeInput',
    components: {
      // 使用异步组件
      [Field.name]: Field,
    },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin],
    data() {
      return {
        oldValue: '',
        conditionProperty: {
          disabled: false,
          hidden: false,
        },
      }
    },
    computed: {
      moduleType() {
        return this.info.extension.moduleType.value
      },
      //是否默认当前时间
      isDay() {
        return this.info.extension.isDay.value
      },
      // 扩展默认框
      defaultValue() {
        return this.info.extension.defaultValue.value
      },
    },
    watch: {
      // 日期时间类型
      moduleType: {
        handler() {
          this.dealVal()
        },
      },
      isDay: {
        handler() {
          this.dealVal()
        },
      },
      defaultValue: {
        handler(newVal) {
          this.formDataModel = newVal
        },
      },
    },
    created() {
      this.dealVal()
    },
    methods: {
      // 处理变化值
      dealVal() {
        // 默认当前时间
        if (this.isDay) {
          // // 没有表单值
          // if (isEmpty(this.formDataModel)) {
          // 默认值放置表单
          this.formDataModel = this.valType()
          //默认值放置扩展默认值
          this.info.extension.defaultValue.value = this.valType()
          // } else {
          //   //不设置任何默认
          // }
          // if (isEmpty(this.formDataModel)) {
        } else {
          this.info.extension.defaultValue.value = ''
          // this.formDataModel = ''
        }
      },
      valType(time) {
        let timer = time ? time : new Date()
        if (this.moduleType === 'date') {
          // this.info.extension.defaultValue.value = dayjs().format('YYYY-MM-DD')
          return dayjs(timer).format('YYYY-MM-DD')
        } else if (this.moduleType === 'datetime') {
          // this.info.extension.defaultValue.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
          return dayjs(timer).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      confirm(event) {
        if (event.keyCode == 13) {
          this.cursorHover()
        }
      },
      //光标自动选中聚焦的输入框
      focus(e) {
        e.target.select()
      },
      handleChange(val) {
        // 判断组件类型

        if (this.moduleType === 'date') {
          // 如果数据长度不是10位 则直接清空
          const reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
          console.log('时间日期1', this.moduleType, val)
          if (val.length !== 10 || !reg.test(val)) {
            this.formDataModel = ''
            return
          }
          // this.formDataModel = val.length === 8 ? `${val.substring(0, 4)}-${val.substring(4, 6)}-${val.substring(6)}` : ''
        } else if (this.moduleType === 'time') {
          const reg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
          if (val.length !== 8 || !reg.test(val)) {
            this.formDataModel = ''
            return
          }
          // this.formDataModel = val.length === 6 ? `${val.substring(0, 2)}:${val.substring(2, 4)}:${val.substring(4)}` : ''
        } else if (this.moduleType === 'datetime') {
          const reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
          if (val.length !== 19 || !reg.test(val)) {
            this.formDataModel = ''
            return
          }
          // this.formDataModel =
          //   val.length === 14
          //     ? `${val.substring(0, 4)}-${val.substring(4, 6)}-${val.substring(6, 8)} ${val.substring(8, 10)}:${val.substring(
          //         10,
          //         12
          //       )}:${val.substring(12)}`
          //     : ''
        }
        // 更新条件判断的状态
        // this.setPageModulesState('value', this.formDataModel)
        // 调用 change 事件
        this.onChange()
      },
      handleInput(val) {
        if (['date', 'datetime'].indexOf(this.moduleType) > -1 && val.length === 4) {
          if (this.oldValue.length === 5) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += '-'
          }
        } else if (['date', 'datetime'].indexOf(this.moduleType) > -1 && val.length === 7) {
          if (this.oldValue.length === 8) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += '-'
          }
        } else if (this.moduleType === 'datetime' && val.length === 10) {
          if (this.oldValue.length === 11) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ' '
          }
        } else if (this.moduleType === 'datetime' && val.length === 13) {
          if (this.oldValue.length === 14) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        } else if (this.moduleType === 'datetime' && val.length === 16) {
          if (this.oldValue.length === 17) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        } else if (this.moduleType === 'time' && val.length === 2) {
          if (this.oldValue.length === 3) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        } else if (this.moduleType === 'time' && val.length === 5) {
          if (this.oldValue.length === 6) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        }
        this.oldValue = this.formDataModel
      },
    },
  })
</script>
<style lang="scss" scoped>
  .uiPdaDateTimeInput {
    :deep() .hasPrefix .el-input__inner {
      padding-left: 25px;
    }

    :deep() .van-cell {
      padding: 0rem !important;
      display: flex;
      flex-wrap: wrap;
    }
    :deep() .van-field__value {
      overflow: visible;
      width: 100%;
      flex: none !important;
      white-space: pre-line !important;
    }
    :deep() .van-field__control {
      text-indent: 10px !important;
      font-size: 0.8rem !important;
    }
    :deep() .van-icon-search {
      color: rgb(42, 119, 182);
      font-size: 1rem !important;
    }
    :deep() .van-field__label--center {
      font-size: 0.8rem !important;
      padding: 0.5rem 0rem;
    }
    :deep() .van-cell__title {
      font-size: 0.8rem !important;
    }
    :deep() .van-field__left-icon {
      margin: 0rem !important;
      width: 0.8rem !important;
    }
    :deep() .van-field__label {
      width: 74% !important;
    }
    :deep() .checkbox {
      font-size: 0.6rem;
      position: absolute;
      top: 5%;
      left: 35%;
    }
  }
</style>
